<!doctype html>
<html lang="en">

<head>
	<title>Home</title>
	{%include file="public/head_common" /%}
	<!-- Pager CSS -->
<link rel="stylesheet" href="__STATIC__/assets/css/plug.css">
<style type="text/css">
	.c-green{
		color: green;
		font-weight: bold;
	}
	.c-red{
		color: red;
		font-weight: bold;
	}
	.tips{
		position: absolute;
		z-index: 999;
		width: 100%;
		min-height: 100px;
		background: #fff;
		border: 1px solid #ddd;
		box-shadow: 2px 2px 2px #888888;
		padding: 5px;
	}
	.tips>div{
		margin: 2px 0px;
		cursor: pointer;
	}
	.tips>div:hover{
		color: #00AAFF;
	}
	.tips>div>span:first-child{
		display: inline-block;
		width: 32px;
	}
</style>
</head>

<body>
	<!-- MAIN -->
	<div class="main" id="app">
		<!-- MAIN CONTENT -->
		<div class="main-content">
			<ul class="breadcrumb">
			    <li>仓库管理</li>
			    <li>报单记录</li>
			</ul>
			<div class="container-fluid">
				
				<div class="row" style="margin-bottom: 10px;">
					<form class="form-inline" role="form" id="form1">
						<vue-select 
							placeholder="类别"
							v-model="search.cate_name"
							url="{%:url('Goods/getCateListBySort')%}"
							:sorts ="['衣服','下装','鞋','箱包','饰品']"
							style="display: inline-block;width: 100px;">
						</vue-select>
						<vue-select 
							placeholder="品牌"
							v-model="search.brand_name"
							url="{%:url('Brand/getListBySort')%}"
							:sorts ="['AB','CD','EF','GH','IJ','KL','MN','OP','QR','ST','UV','WX','YZ']"
							style="display: inline-block;width: 100px;">
						</vue-select>
						<input type="text" class="form-control" placeholder="订单号" size="5"
								v-model="search.order_no">
						<input type="text" class="form-control" placeholder="档口号" size="5"
								v-model="search.stall_name">
						<select class="form-control" v-model="search.status">
				    		<option value="">- 报单状态 -</option>
				    		<option value="1"> 等待到货</option>
				    		<option value="2"> 已取消</option>
				    		<option value="3"> 已到货</option>
				    	</select>
				    	<vue-select 
							placeholder="销售"
							v-model="search.acct_name"
							url="{%:url('Account/getSalers')%}"
							style="display: inline-block;width: 100px;">
						</vue-select>
					    <button type="button" class="btn btn-primary search" @click="getList(1)">查询</button>
					</form>
				</div>
				<!-- 数据开始-->
				<div class="row" id="result">
					<table class="table table-bordered table-hover">
						<thead>
							<tr>
								<th>报单日期</th>
								<th>档口</th>
								
								<th>商品</th>
								<th>商品信息</th>
								<th>工厂价</th>
								<th>运费</th>
								<th>订单数量</th>
								<th>订单号</th>
								<th>备注</th>
								<th>销售</th>
								<th>到货数量</th>
								<th>报单人</th>
								<th>报单状态</th>
								
								<th>操作</th>
							</tr>
						</thead>
						<tbody>				
								<tr v-for="row in rows">
									<td>{{row.add_day}} 
										<span style="padding-left: 5px; font-size: 10px; color:#aaa;">{{row.add_time}}</span>
									</td>
									<td>{{ row.stall_name }}</td>
									
									<td>
										<a :href="row.goods_pic" title='点击看大图' target="_BLANK" class="pre_view">
											<img :src="row.pic_tmb" height="38">
										</a>
									</td>
									<td>
										{{ row.goods_name }}
										<div style="color:#aaa">{{ row.color }} / {{ row.spec }}</div>
									</td>
									<td>{{ row.price }}</td>
									<td>{{ row.factory_price }}</td>
									<td>{{ row.o_qty }}</td>
									<td>{{row.order_no}}<span style="color: #aaa"> - {{row.order_sn}}</span></td>
									<td>{{ row.remarks }} {{ row.err }}</td>
									<td>{{ row.saler }}</td>
									<td :class="[row.stock==row.qty ? 'c-green' : 'c-red']">{{ row.stock }}</td>
									<td>{{ row.acct_name }}</td>
									<td>
										<span class="label" :class="progress_class[row.status]">
										{{ row.status_txt }}</span>
										
									</td>
									
									<td>
										<a href="#" @click="cancel(row.id)"><i class="fa fa-times"></i> 取消</a> |
										<a href="#" @click="edit(row)"><i class="fa fa-pencil"></i> 修改</a>
									</td>
								</tr>
								<tr v-if="rows.length ==0">
									<td style="color:red" colspan="13">
										<i class="fa fa-search" aria-hidden="true"></i> 查询无记录
									</td>
								</tr>
						</tbody>
					<!-- <div id='tips' style="display: none">加载中...</div> -->
					</table>
					<div id="pageBar">
						<vue-page :total_page='total_page' :cur_page='cur_page' @do-page='getList'></vue-page>
					</div>
				</div>
				<!-- 数据结束-->				
			</div>
		</div>
		<!-- END MAIN CONTENT -->
		<transition name="fade">
			<vue-modal title="登记入库" :visible.sync="showModal">
				<stock-in :rr_id="rr_id"></stock-in>
			</vue-modal>
		</transition>
		<vue-modal title="登记入库" :visible.sync="showModal2">
			<div class="form-horizontal" style="width: 90%;">
				<div class="form-group">
				    <label class="col-md-3 control-label">订单号：</label>
				    <div class="col-md-5 form-control-static">
				    	{{ edit_info.order_no }} - {{ edit_info.order_sn }}
					</div>  
				</div>
				<div class="form-group">
				    <label class="col-md-3 control-label">商品：</label>
				    <div class="col-md-5 form-control-static">{{ edit_info.goods_name }}</div>  
				    <div class="col-sm-1"><img :src="edit_info.goods_pic" height="220" style="position: absolute;"></div>
				</div>
				<div class="form-group">  
				    <label class="col-md-3 control-label">档口：</label>
				    <div class="col-md-3">
				    	<input type="text" class="form-control" v-model="edit_info.stall_name" @input="getStall">
				    	<div class="tips" v-show="stall_rows.length>0">
							<div v-for="row in stall_rows" @click="choose(row)">
								<span>{{ row.pos }}</span>
								<span>{{ row.name }}</span>
							</div>
						</div>
				    </div>  
				    
				</div>
				<div class="form-group">
				    <label class="col-md-3 control-label">工厂价：</label>
				    <div class="col-md-3">
				    	<input type="text" class="form-control" v-model="edit_info.price">
					</div>
				</div>
				<div class="form-group">
				    <label class="col-md-3 control-label">运费：</label>
				    <div class="col-md-3">
				    	<input type="text" class="form-control" v-model="edit_info.factory_price">
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-offset-3 col-sm-5">
						<button type="button" class="btn btn-primary" @click="submitForm()">确认修改</button>
					</div>
				</div>
			</div>
		</vue-modal>
	</div>
	<!-- Javascript -->
	<script src="__STATIC__/assets/vendor/jquery/jquery.min.js"></script>
	<script src="__STATIC__/assets/vendor/vue.js"></script>
	<script src="__STATIC__/components/vue-page.js"></script>
	<script src="__STATIC__/components/vue-select.js"></script>
	<script src="__STATIC__/components/vue-modal.js"></script>
	<script src="__STATIC__/page/stock-in.js"></script>
	<script src="__STATIC__/assets/vendor/layer-v3.1.1/layer/layer.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				search: {
					cate_name: '',
					brand_name: '',
					stall_name: '',
					status: '',
					acct_name: '',
					order_no:''
				},
				rows: [],
				total_page: 0,
				cur_page: 1,
				showModal: false,
				showModal2: false,
				rr_id: '',
				order_id: '',
				progress_class: ['','label-primary','label-danger','label-success'],
				edit_info: {

				},
				timer: null,
				stall_rows: []
			},
			components: {
				'vue-page': vuePage,
				'vue-select': vueSelect,
				'vue-modal': vueModal,
				'stock-in': stockIn
			},
			created: function(){
				this.getList();
				//console.log(this.rows);
			},
			methods:{
				getList: function(page=1){
					var _this = this;
					var data = this.search;
					$.post("{%:url('Purchase/getList')%}?page=" + page,data,function(rsp){
						_this.rows = rsp.data.rows;
						_this.total_page = rsp.data.total_page;
						_this.cur_page = Number(rsp.data.page);
					},'json')
				},
				cancel: function(id){
					var _this = this;
    				if(confirm('确定要取消 ？')) {
    					$.get("{%:url('Purchase/cancel')%}?id="+id,function(rsp){
							alert(rsp.msg);
							_this.getList();
						},'json')
    				}
				},
				edit: function(row){
					this.showModal2 = true;
					this.edit_info = {
						id: row.id,
						order_no: row.order_no,
						order_sn: row.order_sn,
						goods_name: row.goods_name,
						goods_pic: row.goods_pic,
						stall_name: row.stall_name,
						price: row.price,
						factory_price:row.factory_price
					};
				},
				getStall: function(){
					if (this.timer) {
						clearTimeout(this.timer);
					}
					var data = {
						name: this.edit_info.stall_name
					};
					if (data.name==''){
						this.stall_rows = [];
						return;
					}
					var _this = this;
					this.timer = setTimeout(function(){
						$.post("{%:url('Stall/getList')%}",data,function(rsp){
							_this.stall_rows = rsp.data.rows;
						},'json')
					}, 500)
				},
				choose: function(row){
					this.edit_info.stall_name = row.name;
					this.stall_rows = [];
				},
				submitForm: function(){
					var data = this.edit_info;
					var _this = this;

					$.post("{%:url('Purchase/editHandle')%}",data,function(rsp){
						alert(rsp.msg);
						if (rsp.code) {
							_this.showModal2 = false;
							_this.getList();
						}
					},'json')
				}
			}
		});
		var tip_index;
		//鼠标事件
		$('table').on('mouseover','a.pre_view',function(){
			tip_index = layer.tips("<img src='"+$(this).attr('href')+"' height='220'>", this, {
				tips: [2, '#eee'],
				time: 0
			});
		}).on('mouseleave','a.pre_view',function(){
			layer.close(tip_index);
		})
		//关闭面板
		$(document).click(function(e){
			if ($(e.target).hasClass('auto-cm')) {
				return;
			} else {
				$('.tips').hide();
			}	
		})
	</script>
</body>

</html>